<template>
  <div>
    <div class="titles">
      <i @click="goBack" class="iconfont fl">&#xe624;</i>
      <h3 class="title-h3">商品详情</h3>
    </div>
    <div class="content">
      <div class="showWrap margin-top-header">
        <swiper
          class="my-swiper"
          :options="swiperOption"
          ref="mySwiper">
          <swiper-slide
            class="swiperWrap"
            v-for="(item, index) in swiperList"
            :key="index">
            <img :src="'http://47.92.123.35:9090/' + item.imageUrl"/>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <div class="desc-h4">{{desc.goodsTitle}}</div>
        <div class="flex-div price">
          <div class="price-span">
            <span class="yuezujin">￥</span><span class="priceSpan">{{goodsPrice}}</span>
            <span class="priceTime">/天起</span>
          </div>
          <div class="price-flex-1">
            <div class="mailijia">麦粒儿价：{{desc.totalPrice | money}}.00</div>
            <div class="goodsPrice">官方报价：{{desc.officialPrice | money}}.00</div>
          </div>
          <!--官方价格-->
          <br style="clear: both;"/>
        </div>
        <p class="textP">{{desc.goodsAbstract}}</p>
        <!--<a :href="desc.jumpUrl">{{desc.goodsActivity}}</a>-->
      </div>
      <div class="showWrap">
        <div class="flexDiv" @click="doShow">
          <div v-for="(item, index) in iconList" :key="index">
            <div class="iconDiv"><img class="iconImg" :src="item.img"/></div>
            <div>
              <p>{{item.title}}</p>
            </div>
          </div>
          <div class="more" :class="{active: isClick}">></div>
        </div>
        <ul v-if="isShow" class="xuzhi-ul">
          <li class="xuzhi-li" v-for="(item, index) in iconList" :key="index">
            <div class="xuzhi-div">{{item.title}}</div>
            <div>{{item.desc}}</div>
          </li>
        </ul>
      </div>
      <div class="liucheng">
        <h3 class="liucheng-h3">租赁流程</h3>
        <img src="../../../static/1/liuchengtu.jpg" alt="" />
      </div>
      <div class="flexDiv btn_flex">
        <button
          class="xiangxi_btn"
          :class="{xiangxi_btn_active: isActive === index}"
          @click="doChange(index)"
          v-for="(item, index) in btnList"
          :key="index">{{item.title}}</button>
      </div>
      <mt-tab-container
        class="swipe_div"
        v-model="active"
        :swipeable="false">
        <!--图片-->
        <mt-tab-container-item id="img_wrap">
          <img
            :src="'http://47.92.123.35:9090/' + item.imageUrl"
            v-for="(item, index) in imgList"
            :key="index"/>
        </mt-tab-container-item>
        <!--参数-->
        <mt-tab-container-item id="canshu_wrap">
          <div v-for="(value, key, index1) in paramData" :key="index1">
            <h3 class="table-h3">{{key}}</h3>
            <div v-for="(item, index2) in value" :key="index2">
              <div class="tableFlex" v-for="(values, keys, index3) in item" :key="index3">
                <div class="table-title">{{keys}}</div>
                <div class="flex1">{{values}}</div>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <!--评论-->
        <!--<mt-tab-container-item id="pinglun_wrap">
          3
        </mt-tab-container-item>-->
      </mt-tab-container>
    </div>
    <transition name="fade">
      <div v-if="isSpecifications" class="specifications">
        <div class="mask" @click="isSpecifications = false"></div>
        <div class="details-div">
          <div class="details-name">
            <div class="details-img-div">
              <img :src="'http://47.92.123.35:9090/' + swiperList[0].imageUrl"/>
            </div>
            <div class="details-desc">{{desc.goodsName}}</div>
          </div>
          <div class="details-price">
            <span class="price-span">{{priceData.zujin.monthlyRent | money}}</span>
            <span class="price-time">/月</span>
          </div>
          <div class="details">
            <ul>
              <li
                v-for="(value, key, n) in goodsInfo"
                :key="n"
                class="radio">
                <div class="radio-key">{{key}}</div>
                <div
                  v-for="(item, index) in value"
                  :key="index"
                  class="radio-value"
                  :class="{'radio-active': subIndex[n] === index}"
                  @click="doParama(item, n, index)">{{item}}</div>
              </li>
              <li class="radio">
                <div class="radio-key">选择期数</div>
                <div
                  class="radio-value"
                  v-for="(item, index) in aTimes"
                  :key="index"
                  :class="{'radio-active': ind === index}"
                  @click="setTime(item, index)">{{item}}个月</div>
              </li>
            </ul>
          </div>
          <div class="details-btn" @click="xiadan">开始下单</div>
        </div>
      </div>
    </transition>
    <div class="btn-div">
      <div class="btn" @click="isSpecifications = !isSpecifications">选择规格</div>
    </div>
  </div>
</template>

<script>
import {getGoods, queryPrice, getBanner, getDetails, computePrice} from '../../api/goods.js'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        notNextTick: true,
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 'auto',
        centeredSlides: true,
        paginationClickable: true
      },
      swiperList: [],
      isShow: false,
      isClick: false,
      btnList: [
        {
          title: '图文详情',
          id: 'img_wrap'
        },
        {
          title: '商品参数',
          id: 'canshu_wrap'
        }
//      {
//        title: '用户评价',
//        id: 'pinglun_wrap'
//      }
      ],
      isActive: 0,
      active: 'img_wrap',
      imgList: [],
      searchBarFixed: false,
      goods: {},
      paramData: {},
      desc: {
        goodsTitle: ' ',
        goodsPrice: 0
      },
      goodsPrice: 0,
      isSpecifications: false,
      goodsInfo: {},
      goodsActive: -1,
      subIndex: [],
      ind: '',
      parama: [],
      priceData: {
        result: {
          sku: 0
        },
        zujin: {
          monthlyRent: 0
        }
      },
      monthlyRent: 0,
      aTimes: [
        6,
        12
      ],
      times: 12,
      iconList: [
        {
          img: './static/zhengpin.png',
          title: '正品保证',
          desc: '全新正品行货，品质保障，让您省心租、放心用！'
        },
        {
          img: './static/ling.png',
          title: '零元购机',
          desc: '无任何前期费用，商品任选，0元租、0压力！'
        },
        {
          img: './static/yue.png',
          title: '按月付租',
          desc: '每月按月付租，轻松购、任性拿！'
        },
        {
          img: './static/shan.png',
          title: '闪电发货',
          desc: '顺丰发货，下单直达，今天订明天拿，就是这么快！'
        }
      ]
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      if (that.$route.query.path === '/') {
        that.$router.push({
          path: '/'
        })
      } else {
        that.$router.push({
          path: '/list'
        })
      }
      error
    }
  },
  methods: {
    goBack () {
      if (this.$route.query.path) {
        this.$router.push({
          path: this.$route.query.path
        })
      } else {
        this.$router.push({
          path: '/list'
        })
      }
    },
//  handleClick () {
//    console.log(11)
//  },
    doShow () {
      this.isClick = !this.isClick
      this.isShow = !this.isShow
    },
    doChange (index) {
      this.isActive = index
      this.active = this.btnList[index].id
    },
    doParama (item, n, index) {
      if (this.parama[n] !== item) {
        this.parama[n] = item
        this.subIndex[n] = index
      } else {
        this.parama[n] = ''
        this.subIndex[n] = -1
        this.price = 0
      }
      if (this.parama.length === 3) {
        let that = this
        that.queryPrice()
      }
      this.$forceUpdate()
    },
    setTime (item, index) {
      this.ind = index
      this.parama[2] = item
      this.$store.state.times = this.times = item
      if (this.parama.length !== 3) {
        return false
      }
      this.queryPrice()
      this.$forceUpdate()
    },
    xiadan () {
      if (this.monthlyRent === 0) {
        return false
      } 
      this.$store.state.goodsColor = this.parama[1]
      this.$store.state.goodsMemory = this.parama[0]
      this.$store.state.goodsName = this.desc.goodsName
      this.$store.state.times = this.times
      this.$store.state.goods_price = this.priceData.zujin.monthlyRent
      this.$router.push('/userInfo')
    },
    async getGoods () {
      try {
        let data = await getGoods({goodsNum: this.goods.goodsNum})
        this.goods = data.data.paramData
        this.goodsPrice = (data.data.computePrice.rent + data.data.computePrice.principal).toFixed(2)
        this.desc = this.goods.goodsInfo
        this.goodsInfo = JSON.parse(data.data.paramData.goodsInfo.goodsParam)
        this.paramData = JSON.parse(data.data.paramData.paramData)
      } catch (err) {
        console.log(err)
      }
    },
    async queryPrice () {
      try {
        let data = await queryPrice({goodsNum: this.goods.goodsNum, goodsColor: this.parama[1], goodsMemory: this.parama[0], month: this.parama[2]})
        this.priceData = data.data
        this.monthlyRent = this.priceData.zujin.monthlyRent
        this.$store.state.sku = this.priceData.result.sku
      } catch (err) {
        console.log(err)
        this.monthlyRent = this.priceData.zujin.monthlyRent = 0
      }
    },
    async getBanner () {
      try {
        let data = await getBanner({goodsNum: this.goods.goodsNum})
        this.swiperList = data.data
        this.$store.state.topImg = data.data[0].imageUrl
        this.$forceUpdate()
      } catch (err) {
        console.log(err)
      }
    },
    async getDetails () {
      try {
        let data = await getDetails({goodsNum: this.goods.goodsNum})
        this.imgList = data.data
        this.$forceUpdate()
      } catch (err) {
        console.log(err)
      }
    },
    async computePrice () {
      try {
        let data = await computePrice({totalPrice: this.priceData.total_price, month: this.times})
        this.monthlyRent = data.data.monthlyRent
      } catch (err) {
        console.log(err)
      }
    }
  },
  computed: {
    mySwiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  created: function () {
    this.goods.goodsNum = this.$store.state.goodsNum
    console.log(this.$store.state.goodsNum)
    this.getGoods()
    this.getBanner()
    this.getDetails()
  }
}
</script>

<style scoped>
  img{
    width: 100%;
  }
  .active{
    transform: rotate(90deg);
  }
  .titles{
    height: 1.6rem;
    line-height: 1.6rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .title-h3{
    text-align: center;
    font-size: .8rem;
  }
  .iconfont{
    line-height: 1.6rem;
    left: .5rem;
    font-size: .8rem;
    position: absolute;
  }
  .my-swiper{
    border-radius: .5rem;
  }
  .kefu{
    margin-right: .5rem;
  }
  .desc-h4{
    font-size: .8rem;
    font-weight: 600;
  }
  .liucheng{
    padding: 0 3%;
    font-size: .7rem;
    margin-bottom: .5rem;
  }
  .liucheng-h3{
    margin-bottom: .2rem;
    font-weight: 300;
  }
  .showWrap{
    margin: 0 3% .5rem;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
    padding: .4rem .8rem;
  }
  .swiperWrap img{
    width: 100%;
    vertical-align: middle;
    border-radius: .5rem;
  }
  .margin-top-header{
    margin-top: 2rem;
  }
  .flex-div{
    display: flex;
    justify-content: space-between;
    padding: .2rem 0;
  }
  .price-flex-1{
    flex: 1;
  }
  .priceSpan{
    color: #e94c75;
    font-size: 1.2rem;
    /*调整价值对齐*/
    /*line-height: 1.6rem;*/
    font-weight: 200;
    font-family: NSimSun;
  }
  .priceTime{
    font-size: .5rem;
    color: #606266;
    font-family: NSimSun;
  }
  .goodsPrice{
    font-size: .5rem;
    color: #cdcdcd;
    /*line-height: 1.6rem;*/
    text-decoration: line-through;
    text-align: right;
  }
  .yuezujin{
    font-size: .6rem;
    margin-top: .4rem;
    font-weight: 300;
  }
  .mailijia{
    text-align: right;
    font-size: .6rem;
  }
  .textP{
    font-size: .65rem;
    color: #606266;
  }
  .flexDiv{
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: .55rem;
    color: #606266;
    padding-bottom: .5rem;
  }
  .more{
    line-height: 1.2rem;
    color: #000;
    align-self: center
  }
  .iconDiv{
    width: 1.3rem;
    margin: 0 auto;
  }
  .xuzhi-ul{
    border-top: 1px solid #E4E7ED;
    padding: 0 1rem;
  }
  .xuzhi-li{
    font-size: .5rem;
    color: #606266;
    margin-top: .3rem;
  }
  .xuzhi-div{
    font-size: .6rem;
    color: #000;
    margin-bottom: .2rem;
  }
  .btn_flex{
    padding: 0 3% .5rem;
  }
  .xiangxi_btn{
    background: transparent;
    border: 0;
    font-size: .7rem;
    width: 4rem;
    line-height: 1.2rem;
    border-radius: .6rem;
    color: #606266;
    outline: none;
  }
  .xiangxi_btn_active{
    color: #303133;
    box-shadow: 0 0 0.3rem #b5b5b6;
  }
  .swipe_div{
    margin: 0 3% 1.7rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
    border-radius: .3rem;
  }
  .table-h3{
    background:;
    font-size: .8rem;
    line-height: 1.5rem;
    padding-left: 1rem;
    color: #e94c75;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
  }
  .tableFlex{
    display: flex;
    font-size: .6rem;
    padding: .25rem 1rem;
    align-items:center;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
  }
  .table-title{
    width: 4rem;
  }
  .flex1{
    flex: 1;
  }
  .btn-div{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f8f8;
    padding: .2rem 0;
    z-index: 10;
    width: 100%;
    height: 1.3rem;
  }
  .btn{
    background: #e94c75;
    color: #fff;
    text-align: center;
    border-radius: .8rem;
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: .7rem;
    margin-left: 12%;
    margin-right: 12%;
  }
  .specifications{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 11;
  }
  .mask{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .details-div{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    box-sizing: border-box;
    background: #EBEEF5;
    display: flex;
    flex-direction: column;
  }
  .details-name{
    display: flex;
    color: #606266;
    height: 5rem;
    background: linear-gradient(right, #DCDFE6, #909399);
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    padding: .6rem 1rem;
    box-sizing: border-box;
  }
  .details-img-div{
    width: 40%;
    position: relative;
  }
  .details-img-div img{
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: .3rem;
    border: 2px solid #dcdddd;
  }
  .details-desc{
    padding-left: .5rem;
    padding-top: .5rem;
    font-size: .7rem;
    font-weight: 700;
  }
  .details-price{
    height: 2rem;
    padding-top: .5rem;
    text-align: center;
  }
  .price-time{
    font-size: .5rem;
  }
  .price-span{
    font-size: 1rem;
    color: #e94c75;
  }
  .details{
    flex: 1;
    margin-bottom: 2.15rem;
    overflow: scroll;
    padding: .5rem;
  }
  .details-btn{
    background: #e94c75;
    color: #fff;
    text-align: center;
    border-radius: .8rem;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: .7rem;
    margin-left: 12%;
    margin-right: 12%;
    margin-bottom: .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .radio{
    overflow: hidden;
  }
  .radio-key{
    /*width: 4rem;*/
    font-size: .7rem;
    font-weight: 700;
    /*line-height: 1.3rem;*/
    margin-bottom: .5rem;
  }
  .radio-value{
    float: left;
    font-size: .6rem;
    font-weight: 700;
    margin-right: 1rem;
    margin-bottom: .5rem;
    padding: .2rem;
    min-width: 2rem;
    text-align: center;
    border: 0.05rem solid #909399;
    border-radius: 1rem;
  }
  .radio-active{
    border-color: #e94c75;
    color: #e94c75;
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .2s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(5rem);
  }
  .content {
    position: fixed;
    background: #f7f8f8;
    top: 0;
    left: 0;
    bottom: 0; /*距离底部的距离为底部盒子的高度，自己也可以设置*/
    overflow-y: scroll;
    width: 100%;
    height: auto;
    -webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
  }
</style>
